<!--
author:        hejiyang <silentmanager@163.com>
date:          2024-11-13 15:16:16
component:     applicationCustomer
Copyright © YourCompanyName All rights reserved
-->

<template>
  <el-dialog v-model="isVisible" title="申请客户" width="600px" @update:visible="handleClose">
    <el-form :rules="rules" ref="formRef" :model="form" label-width="auto">
      <el-form-item prop="level" label="客户类型" :required="true">
        <el-select
          @change="selectChange"
          v-model="form.level"
          placeholder="请选择客户类型"
          style="width: 100%"
        >
          <el-option
            v-for="item in CustomerTypeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item prop="number" label="申请数量" :required="true">
        <el-input-number
          placeholder="请输入申请数量"
          v-model="form.number"
          :min="0"
          :precision="0"
          style="width: 100%"
          :max="currentCount.count"
        />
      </el-form-item>
    </el-form>
    <div
      >当前数量为<span style="margin-left: 36px; font-size: 16px; color: #409eff">
        {{ currentCount.count }}
      </span></div
    >
    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="primary" :loading="loading" @click="handleSave">申请</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { byLevelCountCustomer, ByLevelCountCustomerRes, receiveCustomer } from '@/api/customer'
import { CustomerTypeOptions } from '@/mock/index'
import { ElForm } from 'element-plus'
import { ref, defineExpose } from 'vue'
const message = useMessage()
const emit = defineEmits<{
  (e: 'success'): void // 添加 success 事件
}>()
// ----------------------------- 表单 -----------------------------
const loading = ref(false)
const formRef = ref<InstanceType<typeof ElForm> | null>(null)
const form = reactive({
  number: 0,
  level: ''
})
const rules = reactive({
  level: [{ required: true, message: '请选择客户类型', trigger: 'change' }],
  number: [{ required: true, message: '请输入申请数量', trigger: 'change' }]
})
// 切换变更数量
const selectChange = () => {
  form.number = 0
}
// 当前客户类型有多少数量
const currentCount = computed(() => {
  const match = levelCount.value.find((item) => item.level === form.level)
  return match || { count: 0, level: 'A' }
})
// 客户类型所包含数量
const levelCount = ref<ByLevelCountCustomerRes[]>([])
// 获取
const byLevelCountCustomerFn = async () => {
  try {
    const res = await byLevelCountCustomer()
    levelCount.value = res
  } catch (e) {
    console.error(e)
  }
}

const handleSave = async () => {
  loading.value = true
  try {
    await formRef?.value?.validate()
    const res = await receiveCustomer(form.number, form.level)
    if (res.code === 0) {
      emit('success')
      message.success('申请成功')
      handleClose()
    } else {
      message.warning(res.msg)
    }
  } catch (e) {
    console.error(e)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  byLevelCountCustomerFn()
})
// ----------------------------- 抽屉状态 -----------------------------
const isVisible = ref(false)
// 暴露控制弹窗的方法

const handleClose = () => {
  isVisible.value = false
  form.number = 0
  form.level = ''
}

defineExpose({
  open() {
    isVisible.value = true
  },
  close() {
    isVisible.value = false
  }
})
</script>
